<template>
  <!-- 商品卡片 -->
  <view class="goods">
    <view class="good-item" v-for="(item,index) in goodlist" :key="index" @click="toDetails(item.goods_id)">
      <view v-if="islogin" class="like" @click.stop="like(item)">
        <image v-if="item.collection>0"  src="/static/images/likehover.png"></image>
        <image v-else src="/static/images/like.png"></image>
      </view>
      <view class="top">
        <image class="good-img" lazy-load :src="getFirstImageLink(item.goods_images)" mode="aspectFit"></image>
      </view>
      <view class="title">
        {{ item.goods_name }}
      </view>
      <view class="price">
        <view v-if="item.personal_price"> MOP {{ item.personal_price }}</view>
      </view>
      <view class="bottom">
        <view class="inventory" v-if="item.goods_number">
          庫存{{ item.goods_number }}
        </view>
        <view class="add" v-if="hasadd">
          <image v-if="value<1" @click="increment" class="addone" src="../static/images/add_cart.png" mode="">
          </image>
          <view v-else class="stepper">
            <view class="stepper-btn" @click="decrement">
              <image src="@/static/images/quantity_reduce.png" mode=""></image>
            </view>
            <view class="stepper-value">{{ value }}</view>
            <view class="stepper-btn" @click="increment">
              <image src="@/static/images/quantity_add.png" mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  mapActions,
  mapState,
} from 'vuex';
import {collection} from "@/network/api/cart";

export default {
  props: {
    goodlist: Array,
    hasadd: {
      type: Boolean,
      default: false, // 设置默认值为 false，以防未传递该 prop
    },
    initialValue: {
      type: Number,
      default: 0
    },
    step: {
      type: Number,
      default: 1
    },
    min: {
      type: Number,
      default: -Infinity
    },
    max: {
      type: Number,
      default: Infinity
    }
  },
  data() {
    return {
      // value: this.initialValue
      value: this.initialValue
    }
  },
  computed: {
    ...mapState({
      islogin: state => state.user.islogin,
      company: state => state.user.company,
      userinfo: state => state.user.userinfo,
      cartnums: state => state.user.cartnums,
      quotenums: state => state.user.quotenums,
    })
  },
  methods: {
    async like(item) {
      console.log(item)
      if (!this.islogin) {
        return uni.showToast({
          title: '請先登錄',
          icon: 'none'
        })
      }
      let data = {
        user_id: this.userinfo.id,
        goods_id: item.goods_id,
        goods_sn: item.goods_sn,
        goods_name: item.goods_name,
      }
      const res = await collection(data)
      if (res.data.code == 1) {
        item.collection = 1
        uni.showToast({
          title: '收藏成功',
          icon: 'none'
        })
      }
      if (res.data.code == 3) {
        item.collection = 0
        uni.showToast({
          title: '取消收藏',
          icon: 'none'
        })
      }
      //强制刷新
      this.$forceUpdate()
    },
    ...mapActions(['getgoodDetails', 'toDetails']),
    increment() {
      const newValue = this.value + this.step;
      if (newValue <= this.max) {
        this.value = newValue;
        this.$emit('change', this.value);
      }
    },
    decrement() {
      const newValue = this.value - this.step;
      if (newValue >= this.min) {
        this.value = newValue;
        this.$emit('change', this.value);
      }
    }
  }
}
</script>

<style lang="scss">
.goods {
  margin-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  .good-item {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 15rpx;
    margin-bottom: 15rpx;
    width: calc(100% / 2 - 20px);
    background: #FFFFFF;
    border: 1px solid #DEDEDE;
    border-radius: 30rpx;
    position: relative;

    .like {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      z-index: 99;
      width: 60rpx;
      height: 60rpx;

      image {
        width: 60rpx;
        height: 60rpx;
      }
    }

    .top {
      width: 100%;
      height: 321rpx;
      border-radius: 30rpx 30rpx 0rpx 0rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .good-img {
        width: 284.87rpx;
        // height: 132.39rpx;
        max-height: 321rpx;
      }
    }

    .title {
      margin-left: 0;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;


    }

    .price {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #4949C3;
      margin: 8rpx 0;
    }

    .bottom {
      display: flex;
      justify-content: space-between;

      .inventory {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }

      .add {
        .addone {
          width: 57rpx;
          height: 57rpx;
        }

        .stepper {
          display: flex;
          // align-items: center;
          vertical-align: middle;

          .stepper-value {
            margin: 0 20rpx;
            font-size: 24rpx;
            line-height: 43rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }

          .stepper-btn {
            image {
              width: 44rpx;
              height: 44rpx;
            }
          }
        }
      }
    }
  }
}
</style>
